<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格数据</title>

    <script type="application/javascript" src="../js/vue.js"></script>
    <script type="application/javascript" src="../js/index.js"></script>
    <link rel="stylesheet" href="../css/index.css">
    <script src="..js/axios.min.js" type="application/javascript"></script>

</head>
<body>
<div id="app">
    <div>
        <el-table
            :data="tableData"
            border
            style="width: 100%">

            <el-table-column
                label="编号"
                prop="id"
                width="180">
            </el-table-column>

            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>

            <el-table-column
                label="年龄"
                prop="age"
                width="200">
            </el-table-column>

            <el-table-column
                    label="性别"
                    prop="sex"
                    width="200">
            </el-table-column>

            <el-table-column
                    prop="address"
                    label="操作"
                    width="400">
                <template slot-scope="scope">
                    <el-button type="primary" @click="update(scope.row)" round>编辑</el-button>
                    <el-button type="success" round>编辑</el-button>
                </template>
            </el-table-column>



        </el-table>
    </div>
</div>

<script>
    let app = new Vue({
        el:"#app",

        data(){
            return{
                tableData: []
            }
        },
        create(){
            this.fun01()
        },
        methods:{
            fun01(){
                axios.get("http://localhost:8080/test?m=test01").then(res =>{
                    console.log(data)
                    this.tableData = res.data
                })
            },
            update(row){
                console.log("当前数据行为:",row)
                alert("调用方法")
            },
            del(){
                alert("调用删除方法")
            }
        }



    })

</script>


</body>
</html>